<template>
	<view class="detail">
		<view class="detailBox">
			<view class="backBoxTwo" @click="toback()">
				<text class="iconfont icon-return">返回</text>
			</view>
			<view class="detail_head">
				<img :src="item.cover" alt="">
			</view>
			<view class="titleBox">
				<view class="TitleOne"><text>{{item.title}}</text> </view>
				<view class="content_xianzi"><text>{{item.content}}</text>
					<view class="author">
						<span>{{item.author}}</span>
					</view>
				</view>
			</view>

			<view class="comments">
				<view class="imgList">
					<view class="textTitle">连载中</view>
					<view class="box_img"><img src="../../static/goods/daxiangwuxing.jpg" alt="">
						<view class="text"><text>大象无形</text></view>
					</view>
				</view>

				<view class="comment">
					<view class="name_div">
						<text>大象无形</text>
						<view class="report_comment" @click="report_content">
							<text>我要评论</text>
							<text class="iconfont icon-pinglun"></text>
						</view>
						<view class="report_box" v-show="opencontent">
						 <textarea  v-model="contentInfo" name="" id="" cols="30" rows="10" placeholder="请输入您的评论"></textarea>
						 <text @click="AddComment" class="sentOut">发送</text>
						</view>
					</view>
				
					<!-- 评论列表 -->
					<view class="CommentsLisst" v-for="(list,count) in reportComment" :key="count">
						<view class="person_comment">
							<view class="userImg">
								<img :src="list.headPic" alt="">
							</view>
							<view class="comment_box">
								<view class="text_comment">
									<text class="nameTitle">{{list.Nickname}}</text>
									<view class="comment_Title">
										<text  @click="open_input" class="comment_content">{{list.commentContent}}</text>
									    <input type="text"  :v-model="content" class="wirte_in "  v-show="openComment"  placeholder="请输入内容" maxlength="100" @blur="blur" @focus="focus" @keyup.enter="submit">
									</view>
								</view>
								<view class="praise"><span class="iconfont icon-dianzan"></span></view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="popup">
				<view class="shoucang" @click="AddFavorite()">收藏</view>

				<button class="btn_read" @click="toRead()">开始阅读</button>

			</view>

		</view>
       
	</view>
</template>

<script>
	export default {
		data() {
			return {
                 item:{
					 _id:"",
					     cover: "../../static/goods/daxiangwuxing.jpg",
					     title: "大象无形",
					     author: "番奇动漫/三番熊X赵夏煜",
					     content: "另类茅山宗怼乱妖！无敌茅山小道士遇上煞劫打工妹"
				 },
				 favorite:{
					 cover:"",
					 title:""
				 },
				  commentTable:
				  {
					  headPic:"",
					  Userpermissions:"",
					  Nickname:"",
					  commentContent:"",
					  supportNum:0,
					  comment_data:null
				  },
				  openComment:false,//回复开关
				  opencontent:false,//评论开关
				  content:'',//回复内容
				  reportComment:[],//评论信息,
				  contentInfo:'',//发布评论信息
			}
		},
		
		onLoad(e) {
			//加载时接收参数
			if(e.item){
					this.item=JSON.parse(e.item);
			}
			this.favorite.cover=this.item.cover;
			this.favorite.title=this.item.title;
			this.getComment();
	
			
		},
		
		methods: {
			//发布内容
			report_content(){
				this.opencontent=!this.opencontent;
				
			},
			focus(res) {
				console.log("获取焦点")
				
			},
			//输入框开关
			open_input(){
				uni.showToast({
					title: '请输入您发表的内容',
					icon:'none'
				});
				this.openComment=!this.openComment;
			
			},
			// 失去焦点
			blur(res){
				console.log("失去焦点")
				this.openComment=!this.openComment;
			},
			//评论回复
			submit(res){
				uni.showToast({
					title: '已发布',
					icon:'none'
				});
				this.openComment=!this.openComment;
			},
			
			// 跳转阅读页面
			toRead() {
				uni.navigateTo({
					url: '/pages/read/read'
				})
			},
			//跳转返回页面
			toback(){
				uni.redirectTo({
					url:'/pages/home/home'
				})
			},
			//添加收藏
			AddFavorite(){
				const db=uniCloud.database();
				db.collection('Favorite').add(this.favorite).then(e=>{
					uni.showToast({
						title:"已收藏",
						icon:"none"
					})
				})
			},
			
			//获取评论内容
			getComment(){
				uniCloud.callFunction({
					name:"getComment"
				}).then(res=>{
					
					this.reportComment=res.result.data;
					
				})
			},
			//添加评论
			AddComment(){
		      this.commentTable.commentContent=this.contentInfo;
			  console.log(this.commentTable);
				const db=uniCloud.database();
				db.collection('commentTable').add(this.commentTable).then(e=>{
					uni.showToast({
						title:"评论成功",
						icon:"none"
					}),
					setTimeout(()=>{
				this.opencontent=!this.opencontent;
					},1000)
				})

			},
		}
	}
</script>

<style>
	/* 评论发布 */
	.report_box{
		margin-top: 20px;
		width: 100%;
		height: 175px;
		background-color: aliceblue;
		border-radius: 20px;
	}
	.report_box textarea{
		width: 60%;
		margin: auto;
		border-radius: 20px;
		border:3px solid #eee;
		background-color: white;
		padding: 5px;
		
	}
  .sentOut{
        float: right;
        margin-right: 20px;
		transform: translateY(-25px);
  }
    .sentOut:active{
		color: tomato;
	}
	/* 返回弹出框 */
	.backBoxTwo{
		width: 100%;
		height: 35px;
		background-color: rgba(79, 79, 79, 0.5);
		position: fixed;
		display: flex;
		align-items: center;	
		
	}
  .backBoxTwo text{
			  color: aliceblue;
			  
	}
	
	/* 固定弹出框 */
	.popup {
		width: 100%;
		display: flex;
		background-color: white;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		height: 65px;
		box-shadow: -5px -5px 30px rgba(226, 226, 226, 0.9)
	}

	.shoucang {
		width: 100px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 20px;
	}
	.shoucang:active{
		background-color: aliceblue;
	}

	.popup .btn_read {
		width: 100px;
		background-color: orangered;
		border-radius: 20px;
		height: 40px;
		line-height: 40px;
		margin: 0;
	}

	/* 简介 */
	.detail {
		width: 100%;
		height:1600px;
		max-height: 1600px;
	}

	.detailBox {

		position: relative;
	}

	.detail_head {
		width: 100%;
		height: 190px;
	}

	.detail_head img {
		height: 214.5px;
		width: 100%;
		object-fit:cover;
	}

	.titleBox {
		width: 90%;
		height: 160px;
		margin: auto;
		padding: 8px;
		background-color: white;
		border-radius: 15px;
		position: absolute;
		left: 10px;
		box-shadow: -5px -5px 30px rgba(226, 226, 226, 0.9)
			/*blur值为5px*/
	}

	/*简介标题 */
	.TitleOne {
		padding-top: 5px;
		padding-bottom: 5px;
		font-size: 20px;
		position: relative;
	}
	/* 内容长度限制 */
	.content_xianzi{
		width: 100%;
		height: 95px;
		font-size: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 作者 */
	.author {
		position: absolute;
		bottom: 15px;

	}

	.comments {
		width: 100%;
		padding: 10px;
		margin-top: 50%;

	}

	/* 连载中 */
	.imgList {
		width: 94%;

	}

	.imgList .textTitle {
		padding-bottom: 8px;
		font-size: 18px;
	}

	.imgList .box_img {

		border-radius: 10px;
		width: 140px;

	}

	.box_img img {
		width: 100%;
		border-radius: 10px;

	}

	.box_img .text {
		width: 100%;
		padding-left: 5px;

	}

	/* 评论 */
	.comment {
		margin-top: 18px;
		width: 94%;


	}
/* 	评论发表 */
	.name_div{
		position: relative;
	}
   .report_comment{
	   display: inline;
	   position: absolute;
	   right: 0;
   }
   .report_comment:active{
	   background-color: aliceblue;
   }
   
   
   
   
	.CommentsLisst {
		width: 100%;
		margin-top: 15px;

	}

	.person_comment {
		width: 90%;
		display: flex;

	}

	.person_comment .nameTitle {
		font-weight: 900;


	}

	.comment_Title {
		margin-top: 7px;
		font-size: 13px;
		color: #848484;
		width: 100%;
	}

	/* 头像 */
	
	.userImg{
		background-color: aliceblue;
		width: 55px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
		fexl-grow: 0;
	}
	.userImg img{
		width: 100%;
	}

	/* 内容盒子 */
	.comment_box {
		width: 80%;
		flex-grow: 3;
		display: flex;
		align-items: center;
		justify-content: space-between
	}

	.text_comment {
		width: 80%;

	}
	//输入框
   .wirte_in{
	background-color: aliceblue;
   }
	/* 点赞 */
	.praise {
		font-size: 12px;
		color: #878787;
	}
	.praise .icon-dianzan:active{
		border-radius: 20px;
		box-shadow: 1px -3px 5px orangered;

	}
</style>